<template>
  <section v-loading="loading" class="cms-body flex">
    <!-- 树组件 -->
    <cms-tree @change="getChannelId" :copy="false" :hasContent='false'></cms-tree>
    <div class="cms-content-right">
      <!-- 频道 -->
      <div class="cms-list-header clearfix flex" v-show="breadState">
        <div class="bread-box cms-left">
          <label class="">当前统计频道:</label>
          <ul class="type-bread">
            <li class="bread-items" v-for="(item,index) in breadItems" :key="index">
              <a href="javascript:void(0)">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="cms-list-header clearfix flex" style="padding:0 24px 16px 24px;flex-wrap:wrap">
        <div style="margin-top:16px;flex:auto" class="content-flex-right">
          <el-date-picker
            v-if="params.searchType==1"
            v-model="params.year"
            type="year"
            value-format="yyyy"
            placeholder="选择年">
          </el-date-picker>
          <el-date-picker
            v-if="params.searchType==2"
            type="month"
            value-format="yyyy-MM"
            v-model="params.month"
            placeholder="选择月">
          </el-date-picker>
          <el-date-picker
            v-if="params.searchType==3"
            v-model="params.day"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <el-radio-group v-model="params.searchType">
            <el-radio :label="1">按年</el-radio>
            <el-radio :label="2">按月</el-radio>
            <el-radio :label="3">按天</el-radio>

          </el-radio-group>
          <!--  <el-tag @click="setTime('today')" :effect="choose==1?'dark':'light'" style="cursor: pointer;" v-if="radio==3">今天</el-tag>
            <el-tag @click="setTime('sevenday')" :effect="choose==2?'dark':'light'" style="cursor: pointer;" v-if="radio==3">近7天</el-tag>
            <el-tag @click="setTime('onemonth')" :effect="choose==3?'dark':'light'" style="cursor: pointer;" v-if="radio==3">近一月</el-tag>
            <el-tag @click="setTime('threemonth')" :effect="choose==4?'dark':'light'" style="cursor: pointer;" v-if="radio==3">近三月
            </el-tag>-->

          <!-- <el-date-picker v-model="params.startTime" type="date" placeholder="开始时间" class="cms-width"
                           value-format="yyyy-MM-dd">
           </el-date-picker>
           <el-date-picker v-model="params.endTime" type="date" placeholder="结束时间" class="cms-width"
                           value-format="yyyy-MM-dd">
           </el-date-picker>-->
          <el-button @click="searchClick">查询</el-button>
          <el-button @click="exportExcel2()">导出</el-button>
        </div>
      </div>
      <el-table :data="tableData" stripe @selection-change="checkIds">
        <el-table-column type="index" label="#" width="60" align="center"></el-table-column>
        <el-table-column label="姓名" prop="userName" align="center"></el-table-column>
        <el-table-column label="合计" prop="totalNum" align="center" width="100">
          <div slot-scope="scope">
            <a href="javascript:void(0)" title="点击查看" @click="lookContents(scope.row,'')">
              {{scope.row.totalNum}}
            </a>
          </div>
        </el-table-column>
        <template v-for="item in columns">
          <el-table-column :label="item.label" :prop="item.field" align="center">
            <div slot-scope="scope">
              <a href="javascript:void(0)" title="点击查看" @click="lookContents(scope.row,item.value)">
                {{scope.row[item.field]}}
              </a>
            </div>
          </el-table-column>
        </template>
      </el-table>
      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:30px;"></div>
    </div>
    <el-dialog title="文章列表" :visible.sync="showDrawerTable" direction="rtl" width="90%" @close="initDrawerParams()">
      <div style="margin-bottom:16px;flex:auto;margin-left: 20px;" class="content-flex-right">
        <cms-input label="标题" v-model="title"></cms-input>
        <el-button @click="goQueryTopic()">查询</el-button>
      </div>
      <el-table :data="drawerTableData" stripe v-loading="loading">
        <el-table-column prop="contentId" label="id" width="50" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" align="left" min-width="250px">
          <div slot-scope="scope" @click="cellClick(scope.row)" title="点击标题预览">
            <span class="cms-channel-name" style="color: #999;">[{{scope.row.channelName}}]</span>
            {{scope.row.title}}
          </div>
        </el-table-column>
        <!--编辑 -->
        <el-table-column label="编辑" prop="userName" align="center"></el-table-column>
        <!--责编 -->
        <el-table-column label="责编" prop="checkUserName" align="center"></el-table-column>
        <!--发布时间 -->
        <el-table-column label="发布时间" prop="releaseDate" align="center"></el-table-column>
        <!--状态 -->
        <el-table-column label="状态" prop="status" align="center">
          <div slot-scope="scope">
            <span v-if="scope.row.status==0">草稿</span>
            <span v-if="scope.row.status==1">待签发</span>
            <span v-if="scope.row.status==2">已签发</span>
            <span v-if="scope.row.status==3">回收站</span>
          </div>
        </el-table-column>
      </el-table>
      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left"></div>
        <cms-pagination :total="drawerTotal" @change="getDrawerPages"></cms-pagination>
      </div>
    </el-dialog>
    <el-dialog title="文章预览" :visible.sync="isShowContent" v-if="isShowContent">
      <content-preview :contentId="previewId"></content-preview>
    </el-dialog>
  </section>
</template>

<script>
  import listMixins from '@/mixins/list'
  import axios from "axios/index";
  import moment from 'moment'
  import drawerListMixins from '@/mixins/drawerList'

  export default {
    mixins: [listMixins, drawerListMixins],
    data() {
      return {
        params: {
          //请求参数
          channelName: '',
          parentId: '',
          channelLevel: 0,
          modelId: '',
          https: '',
          hasCollect: '',
          searchType: 1,
          userId: '',
          dayNum: 0,
          value: '',
          year: moment().year().toString(),
          month: moment().format('YYYY-MM'),
          day: moment().format('YYYY-MM-DD'),
          startTime: '',
          endTime: ''
        },
        previewId: '',
        isShowContent: false,
        showDrawerTable: false,
        columns: [],
        isShow: true,
        breadState: false,
        choose: 0,
        allTotal: 0, //分页总数
        breadItems: [
          {
            name: '根目录',
            id: ''
          }
        ], //面包屑
        channelInfo: {} //当前频道信息
      }
    },
    watch: {
      "params.month"(val) {
        let months = val
        if (months) {
          let day = new Date(months.split("-")[0], Number(months.split("-")[1]), 0);
          let dayNum = day.getDate();
          this.params.dayNum = dayNum;
        }
      }
    },
    methods: {
      getChannelId(data, node) {
        console.log(data)

        //获取频道树点击
        this.breadState = true
        this.creatBread(node, [])
        this.params.channelId = data.id //传递频道id
        this.params.channelLevel = data.channelLevel;
        this.params.channelName = data.name;
        this.getTableData(this.params) //获取内容信息

      },
      cellClick(row) {
        this.previewId = row.contentId;
        this.isShowContent = true;
      },
      initDrawerParams() {
        this.drawerParams.drawerPageNo = 1;
      },
      getColumns() {
        if (this.params.searchType == 1) {
          return this.getYearColumns();
        }
        if (this.params.searchType == 2) {

          return this.getMonthColumns();
        }
        if (this.params.searchType == 3) {
          return this.getDayColumns();
        }
      },
      searchClick() {
        this.columns = this.getColumns();
        this.goQuery();
      },
      getYearColumns() {
        let columns = [];
        for (let i = 1; i <= 12; i++) {
          columns.push({
            label: i + '月',
            value: i,
            field: 'month' + i
          })
        }
        return columns;
      },
      getMonthColumns() {
        let columns = [];
        let day = new Date(this.params.month.split("-")[0], Number(this.params.month.split("-")[1]), 0);
        let dayNum = day.getDate();
        for (let i = 1; i <= dayNum; i++) {
          columns.push({
            label: i + "号",
            value: i,
            field: 'day' + i
          })
        }
        return columns;
      },
      getDayColumns() {
        let columns = [];
        for (let i = 0; i <= 23; i++) {
          columns.push({
            label: i + "点",
            value: i,
            field: 'hour' + i
          })
        }
        return columns;
      },
      creatBread(node, arr) {
        if (node.parent != null) {
          let params = {
            name: node.data.name,
            id: node.data.id
          }
          arr.push(params)
          this.creatBread(node.parent, arr)
        } else {
          this.breadItems = arr.reverse()
          return false
        }
      },
      setTime(tag) {
        const end = new Date();
        const start = new Date();
        if (tag == "sevenday") {
          // 近7天
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          this.choose = 2;
        } else if (tag == "onemonth") {
          // 近一个月
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          this.choose = 3;
        } else if (tag == "threemonth") {
          // 近三个月
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          this.choose = 4;
        } else {
          this.choose = 1;
        }
        this.params.startTime = start.format("yyyy-MM-dd");
        this.params.endTime = end.format("yyyy-MM-dd");
        this.goQuery();
      },
      //查看新闻明细
      lookContents(row, value) {
        this.showDrawerTable = true;
        this.params.userId = row.userId;
        this.params.value = value;
        this.initDrawerTableData(this.$api.contentPageList, this.params)
      },
      getExcel: function (res) {
        require.ensure([], () => {
          const {export_json_to_excel} = require('../../../vendor/Export2Excel.js')
          const tHeader = ['姓名', '合计']
          const filterVal = ['userName', 'totalNum']
          this.columns.forEach(column => {
            tHeader.push(column.label);
            filterVal.push(column.field);
          });
          const list = res
          const data = this.formatJson(filterVal, list)
          console.log(this.params)
          let channelName = this.params.channelName == "" ? "全部" : this.params.channelName;
          export_json_to_excel(tHeader, data, channelName + '编辑发布统计表')
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      exportExcel2() {
        this.loading = true;
        this.warningMessage('数据正在处理中');
        axios.post(this.$api.totalByUser, this.params).then(res => {
          if (res.code == "200") {
            this.loading = false;
            this.getExcel(res.body)
          }
        }).catch(error => {
          this.loading = false;
        })
      },
    },
    created() {
      this.$store.dispatch('setCollapse', false) //收缩状态栏
      this.loading = false
      this.breadState = false
      if (this.$route.query.type == 'chart.vue') {
        if (this.$route.query.id == 0) {
          this.params.parentId = ''
        } else {
          this.params.parentId = this.$route.query.id
        }
      }
      this.columns = this.getYearColumns();
      this.initTableData(this.$api.totalByUser, this.params) //请求列表
    },
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  }
</script>

<style scoped>
  .bread-box {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
  }

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .type-bread {
    margin-right: 12px;
  }

  .bread-items {
    display: inline-block;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

  .dialog .tree-layout {
    min-height: 400px;
    width: 90%;
  }

  .dialog .tree-layout .tree {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
    border-right: 0px solid #d4dde2;
  }

  .el-icon-tubiao {
    display: block;
    margin: 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    background: url(../../../../static/images/tubiao.png) center center #ff8b53 no-repeat;
    background-size: 14px;
  }
</style>
